<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生</title>
    <!-- 判断本地缓存是否token加密数据 -->
    <script>
      const token = localStorage.getItem("user-token");
      // console.log(token);
      if (token == null) {
        window.location.href = "./login.html";
      }
    </script>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/student.css" />
  </head>
  <body class="application application-offset">
    <div class="container-fluid container-application">
      <div class="sidenav show" id="sidenav-main">
        <!-- Sidenav header -->
        <div class="sidenav-header d-flex align-items-center">
          <a class="navbar-brand" href="./index.html">
            <span class="logo">·ITCAST·</span>
          </a>
        </div>
        <!-- User mini profile -->
        <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
          <!-- Avatar -->
          <div>
            <a href="#" class="avatar rounded-circle avatar-xl">
              <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" class="" />
            </a>
            <div class="mt-5">
              <h5 class="mb-0 text-white">黑马前端</h5>
              <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
              <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
                <span class="btn-inner--text">学前端来黑马</span>
              </a>
            </div>
          </div>
        </div>
        <!-- Application nav -->
        <div class="nav-application clearfix">
          <a href="./index.html" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">首页</span>
          </a>
          <a href="./student.html" class="btn btn-square text-sm active">
            <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">学生</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">排版</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">资料</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">就业</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">设置</span>
          </a>
        </div>
        <!-- Misc area -->
        <div class="card bg-gradient-warning">
          <div class="card-body">
            <h5 class="text-white">哈喽, 朋友!</h5>
            <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
            <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
          </div>
        </div>
      </div>
      <div class="main-content position-relative">
        <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
          <div class="container-fluid">
            <!-- Navbar nav -->
            <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
              <ul class="navbar-nav align-items-lg-center">
                <!-- Home  -->
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
                </li>
              </ul>
              <!-- Right menu -->
              <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
                <li class="nav-item dropdown dropdown-animate">
                  <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="media media-pill align-items-center">
                      <span class="avatar rounded-circle">
                        <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                      </span>
                      <div class="ml-2 d-none d-lg-block">
                        <span class="mb-0 text-sm font-weight-bold">Admin</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="page-content">
          <div class="page-title mb-3">
            <div class="row justify-content-between align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
                <span class="text-sm text-white opacity-8">一共有 <b class="total">0</b> 位学员</span>
              </div>
              <div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
                <a id="openModal" href="javascript:;" class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4">
                  <span class="btn-inner--icon"><i class="bi bi-plus bi-2x"></i></span>
                </a>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="card card-fluid">
                <div class="table-responsive" style="min-height: 1000px">
                  <table class="table align-items-center">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>组号</th>
                        <th>期望薪资</th>
                        <th>就业薪资</th>
                        <th>籍贯</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody class="list">
                      <!-- <tr>
                      <td>张杰</td>
                      <td>20</td>
                      <td>男</td>
                      <td>第2组</td>
                      <td>10000</td>
                      <td>13000</td>
                      <td>北京北京市东城区</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                    </tr> -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- footer -->
          <div class="footer pt-5 pb-4 footer-light" id="footer-main">
            <div class="row text-center text-sm-left align-items-sm-center">
              <div class="col-sm-6">
                <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>. All rights reserved.</p>
              </div>
              <div class="col-sm-6 mb-md-0">
                <ul class="nav justify-content-center justify-content-md-end">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Support</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Terms</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pr-0" href="#">Privacy</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="modal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加学员</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="form" class="g-3 row" autocomplete="off" novalidate>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">姓名：</label>
                  <input type="text" name="name" class="form-control" placeholder="请输入姓名" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">性别：</label>
                  <div class="input">
                    <div class="form-check d-inline-block">
                      <input value="0" checked id="cb01" class="form-check-input" type="radio" name="gender" />
                      <label for="cb01" class="form-check-label">男</label>
                    </div>
                    <div class="form-check d-inline-block">
                      <input value="1" id="cb02" class="form-check-input" type="radio" name="gender" />
                      <label for="cb02" class="form-check-label">女</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">年龄：</label>
                  <input type="text" name="age" class="form-control" placeholder="请输入年龄" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">组号：</label>
                  <input type="text" name="group" class="form-control" placeholder="请输入1-8组号" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">期望薪资：</label>
                  <input type="text" name="hope_salary" class="form-control" placeholder="请输入期望薪资" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">就业薪资：</label>
                  <input type="text" name="salary" class="form-control" placeholder="请输入就业薪资" />
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <label class="input-group-label">籍贯：</label>
                  <div class="input pl-0">
                    <select class="form-select custom-select" name="province">
                      <option value="">--省份--</option>
                    </select>
                    <select class="form-select custom-select" name="city">
                      <option value="">--城市--</option>
                    </select>
                    <select class="form-select custom-select" name="area">
                      <option value="">--地区--</option>
                    </select>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-blue" id="submit">确认</button>
          </div>
        </div>
      </div>
    </div>
    <div class="position-fixed top-0 start-50 pt-4" style="z-index: 9899999999; transform: translateX(-50%)">
      <div id="myToast" class="toast bg-rgba">
        <div class="toast-body">提示消息</div>
      </div>
    </div>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script src="./js/common.js"></script>
    <script>
      // 一. 渲染学生列表
      //   1. 获取省份数据 并渲染
      //   2. 获取城市数据 并渲染
      //   3. 获取区数据   并渲染

      // 二. 添加功能
      // 1. new modal
      // 2. dataset.id ='add'
      // 3. 表单serialize提交
      // 4. 调用获取省份函数 城市联动onchange事件

      // 三. 编辑功能
      // 1. url后加${id} 获取当前点击信息的数据
      // 2. forin 遍历填充表单控件数据并判断gender的值是0还是1 若是0 选中单选框

      // 四. 删除功能
      // 1.根据id 删除相对应的数据

      // 五.提交按钮
      // 判断: 1.如果dataset.id是'add' 发送添加请求post
      // 2.else put 修改数据
      async function getList() {
        const stuRes = await axios({
          url: "/students",
        });
        // console.log(stuRes);
        document.querySelector(".list").innerHTML = stuRes.data.data
          .map(
            (v) => `
                   <tr>
                      <td>${v.name}</td>
                      <td>${v.age}</td>
                      <td>${v.gender == 0 ? "男" : "女"}</td>
                      <td>第${v.group}组</td>
                      <td>${v.hope_salary}</td>
                      <td>${v.salary}</td>
                      <td>${v.province}${v.city}${v.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${v.id}></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${v.id}></i></a>
                      </td>
                    </tr>
        `
          )
          .join("");
      }
      getList();

      // 添加学员
      const modalDom = document.querySelector("#modal");
      const modal = new bootstrap.Modal(modalDom);
      document.querySelector(".bi-plus").onclick = async function () {
        document.querySelector(".modal-title").innerHTML = "添加学员";
        modalDom.dataset.id = "add";
        document.querySelector("#form").reset();
        await renderCity();
        await renderArea();
        modal.show();
      };

      // 编辑/删除功能
      document.querySelector(".list").addEventListener("click", async function (e) {
        // 删除功能
        if (e.target.classList.contains("bi-trash")) {
          await axios({
            url: `/students/${e.target.dataset.id}`,
            method: "delete",
          });
          getList();
          tips("删除成功");
        }

        // 编辑功能
        if (e.target.classList.contains("bi-pen")) {
          // console.log(document.querySelector("[name=gender]"));
          modalDom.dataset.id = e.target.dataset.id;
          document.querySelector(".modal-title").innerHTML = "编辑学员";
          const detailRes = await axios({
            url: `/students/${e.target.dataset.id}`,
            method: "get",
          });
          console.log(detailRes);
          const obj = detailRes.data.data;
          for (const key in obj) {
            // console.log(key);
            const dom = document.querySelector(`#form [name=${key}]`);
            // console.log(dom);
            // 单选框不能给value
            if (key !== "gender") {
              dom && (dom.value = obj[key]);
            } else {
              // 单选框判断
              const genderSels = document.querySelectorAll("[name=gender]");
              genderSels[obj[key]].checked = true;
            }
            // if (key == "gender") {
            //   obj[key] == 0 ? (genderSels[0].checked = true) : (genderSels[1].checked = true);
            // }
          }
          await renderCity(detailRes.data.data.city);
          await renderArea(detailRes.data.data.area);
          modal.show();
        }
      });

      // 提交按钮
      document.querySelector("#submit").onclick = async function () {
        const data = serialize(document.querySelector("form"), { hash: true });
        // data.age = +data.age;
        // data.gender = +data.gender;
        // data.hope_salary = +data.hope_salary;
        // data.salary = +data.salary;
        // data.group = +data.group;
        // console.log(data);
        for (const key in data) {
          if (isNaN(data[key]) === false) {
            // 需要转换
            data[key] = +data[key];
          }
        }
        if (modalDom.dataset.id === "add") {
          try {
            const addRes = await axios({
              url: "/students",
              method: "post",
              data,
            });

            document.querySelector("form").reset();
            modal.hide();
            // alert("添加成功");
            tips("添加成功");
            getList();
          } catch (error) {
            console.log(error);
            // tips("参数有误");
            tips(error.response.data.detail[0].message);

            // alert(1);
          }
        } else {
          try {
            const changeRes = await axios({
              url: `/students/${modalDom.dataset.id}`,
              method: "put",
              data,
            });
            console.log(changeRes);
            document.querySelector("form").reset();

            getList();
            modal.hide();
            // alert("修改成功");
            tips("修改成功");
          } catch (error) {
            tips(error.response.data.detail[0].message);
            // console.dir(error.response.data.detail[0].message);
          }
        }
      };

      const proSel = document.querySelector("[name=province]");
      const citySel = document.querySelector("[name=city]");
      const areaSel = document.querySelector("[name=area]");
      async function renderProvince(province = "") {
        const proRes = await axios({
          url: "/api/province",
          method: "get",
        });
        proSel.innerHTML = proRes.data.data.map((v) => ` <option value="${v}">${v}</option>`).join("");
        province && (proSel.value = province);
        proSel.onchange = async function () {
          await renderCity();
          await renderArea();
        };
      }

      async function renderCity(city = "") {
        const cityRes = await axios({
          url: "/api/city",
          method: "get",
          params: {
            pname: proSel.value,
            // pname: "广东省",
          },
        });
        // console.log(cityRes);
        citySel.innerHTML = cityRes.data.data.map((v) => ` <option value="${v}">${v}</option>`).join("");
        city && (citySel.value = city);
        citySel.onchange = async function () {
          await renderArea();
        };
      }

      async function renderArea(area = "") {
        const areaRes = await axios({
          url: "/api/area",
          method: "get",
          params: {
            pname: proSel.value,
            cname: citySel.value,
          },
        });
        console.log(areaRes);
        areaSel.innerHTML = areaRes.data.data.map((v) => ` <option value="${v}">${v}</option>`).join("");
        area && (areaSel.value = area);
      }

      async function renderAll() {
        await renderProvince();
        await renderCity();
        await renderArea();
      }
      renderAll();
    </script>
  </body>
</html>
